<template>
    <el-dialog v-model="show" title="编辑页面" width="400" style="padding-right: 60px">
        <el-form :model="rowObject" :label-width="labelWidth">
            <el-form-item label="名称">
                <el-input v-model="rowObject.name" placeholder="请输入页面名称" />
            </el-form-item>
            <el-form-item label="上级">
                <el-select v-model="rowObject.father" placeholder="请选择上级菜单" @change="changeFather">
                    <el-option v-for="father in fatherList" :key="father.id" :label="father.name" :value="father.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="图标">
                <el-icon v-if="rowObject.icon" :size="20" color="#409eff" @click="openIconDialog">
                    <component :is="rowObject.icon" />
                </el-icon>
                <el-button v-else type="primary" link @click="openIconDialog">选择图标</el-button>
            </el-form-item>
            <el-form-item label="菜单路径">
                <el-input v-model="rowObject.path" placeholder="请输入菜单路径" />
            </el-form-item>
            <el-form-item label="网站SVG">
                <el-image v-if="rowObject.svg" @click="selectImage" style="width: 32px;" :src="baseUrl + rowObject.svg" fit="cover" />
                <el-button v-else type="primary" link @click="selectImage">选择图标</el-button>
            </el-form-item>
            <el-form-item label="网站名称">
                <el-input v-model="rowObject.title" placeholder="请输入网站名称" />
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="rowObject.sort" placeholder="请输入页面排序" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="show = false">取消</el-button>
                <el-button type="primary" @click="sureEditMenu"> 确认 </el-button>
            </div>
        </template>
    </el-dialog>
    <icon-select-dialog ref="iconDialogRef" @selectIcon="selectIcon" />
</template>

<script setup>
const baseUrl = ref(import.meta.env.VITE_APP_BASE_API);
import IconSelectDialog from './icon-select-dialog.vue'
import { ref } from "vue";
import api from "@/api";
const props = defineProps(["fatherList"]);
const $emit = defineEmits(["init"]);
const labelWidth = ref("80px");

const iconDialogRef = ref(null)
const show = ref(false);
const rowObject = ref({});

const showIt = (row) => {
    rowObject.value = {...row};
    show.value = true;
};

const sureEditMenu = () => {
    api.menus.putMenus(rowObject.value).then((res) => {
        $emit("init");
        show.value = false;
    });
};

const changeFather = (id) => {
    const father = props.fatherList.filter((father) => father.id == id)[0];
    rowObject.value.path = father.path + "/";
};

const openIconDialog = () => {
    iconDialogRef.value.openIconSelect()
};

const selectImage = () => {
    const input = document.createElement("input");
    input.type = "file";
    input.accept = ".svg";
    input.onchange = (e) => {
        const file = e.target.files[0];
        if (!file) return;
        const formData = new FormData();
        formData.append("file", file);
        api.utils.upload(formData).then((res) => {
            rowObject.value.svg = res.path;
            input.remove();
        });
    };
    input.click();
};

const selectIcon = (icon) => {
    rowObject.value.icon = icon;
}

defineExpose({
    showIt,
});
</script>